<template>
	<menuheader ref='menuheader' icon='acc'>食谱营养</menuheader>
	<view class='content'>
		<scroll-view class='content-wrapper' scroll-y="true" scroll-x="false">
			<view class='food-box'>
				<scroll-view class='food-tabbar' scroll-x='true' scroll-y='false' enable-flex='true'>
					<view class='tab-item' v-for="(rec, recIndex) in recList" :key="recIndex">
						<view class='item-name' :class='tabIndex==recIndex?"active":""'>{{rec.name}}</view>
						<view class='item-line' v-if="tabIndex==recIndex"></view>
					</view>
				</scroll-view>
				<view class='food-oper'>更多设置</view>
			</view>
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item class='swiper-box' v-for="(rec, recIndex) in recList" :key="recIndex">
					<group2 ref='group2' :foods='rec.foodList' class='group-container'></group2>
				</swiper-item>
			</swiper>
			<uni-section class="mb-10" title="营养元素" type='line' padding='false'>
			  <template v-slot:right>
			    <view class='func-change'><image src='/static/image/ico-exchange.png' class='i4' mode='widthFix'></image>换一批</view>
			  </template>
			</uni-section>
			<view class='statistic'>
				<view class='section'>
					<view class='section-remark'>
						就餐人员共计({{persons.count}})人，折算标准用餐人({{persons.standard_count}})人，能量需要量为({{persons.energy}})kcal
					</view>
					<uni-collapse ref="collapse" v-model="nutritionIndex" @change="change" class="section-content">
						<uni-collapse-item title="查看详情">
							<view class='nutrition-data'>
								<view class='nutrition-block' v-for="(nutrition, nutritionIndex) in nutritions" :key="nutritionIndex">
									<view class='nutrition-name'>{{nutrition.name}}({{nutrition.value}}{{nutrition.unit}})</view>
									<view class='nutrition-remark'>
										<progress class='nutrition-progress nutrition-left' :percent='nutrition.percent' stroke-width='16' backgroundColor='#f1f1f1' activeColor='#ed1c24' border-radius='20' v-if='nutrition.max<nutrition.value'></progress>
										<progress class='nutrition-progress nutrition-left' :percent='nutrition.percent' stroke-width='16' backgroundColor='#f1f1f1' activeColor='#33b4ff' border-radius='20' v-else-if='nutrition.value>=nutrition.rec'></progress>
										<progress class='nutrition-progress nutrition-left' :percent='nutrition.percent' stroke-width='16' backgroundColor='#f1f1f1' activeColor='#999999' border-radius='20' v-else-if='nutrition.value<=nutrition.min'></progress>
										<progress class='nutrition-progress nutrition-left' :percent='nutrition.percent' stroke-width='16' backgroundColor='#f1f1f1' activeColor='#f39801' border-radius='20' v-else-if='nutrition.value<nutrition.rec'></progress>
										<view class='nutrition-rec nutrition-right'></view>
									</view>
									<view class='nutrition-contains'>
										<view class='nutrition-label'>本餐推荐量</view>
										<view class='nutrition-value'>{{nutrition.min}}~{{nutrition.max}}{{nutrition.unit}}</view>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
			<uni-section class="mb-10" title="就餐人员" type='line' padding='false'>
			  <template v-slot:right>
			    <view class='func-change'><image src='/static/image/ico-exchange.png' class='i4' mode='widthFix'></image>换一批</view>
			  </template>
			</uni-section>
			<view class='statistic'>
				<view class='section'>
					<view class='section-remark'>
						就餐人员共计({{persons.count}})人，折算标准用餐人({{persons.standard_count}})人，能量需要量为({{persons.energy}})kcal
					</view>
					<uni-collapse ref="collapse" v-model="personIndex" @change="change" class="section-content">
						<uni-collapse-item title="查看详情">
							<view class='section' v-if="persons.propList.length>0">
								<view class='section-content section-table'>
									<view class='data-block' v-for="(prop, propIndex) in persons.propList" :key="propIndex">
										<view class='data-title'>{{prop.name}}</view>
										<view class='data-rows'>
											<view class='data-row' v-for="(item, itemIndex) in prop.list" :key="itemIndex">
												<view class='data-label'>{{item.name}}</view>
												<view class='data-value'>({{item.count}})</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
			<uni-section class="mb-16" title="自助选餐" type="line">
			  <template v-slot:right>
				  <view class='func-change'>查看更多</view>
			  </template>
			</uni-section>
			<food2 ref='food2' :foods='foodList'></food2>			
			<!-- <uni-section class="mb-10" title="今日推荐" type='line'></uni-section> -->
		</scroll-view>
	</view>
	<view style='height:50px; clear:both'></view>
	<menufooter ref='menufooter'></menufooter>
</template>

<script>
	import group2 from '@/components/menugroup/group2.vue';
	import food2 from '@/components/food/food2.vue';
	import gui from '@/lib/gui.js';

	export default {
		components:{
			group2,
			food2
		},
		data() {
			return {
				avatarList: [{
								url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
							}, {
								url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
							}, {
								url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
							}],
				personIndex:['0'],
				nutritionIndex:['0'],
				accordionVal:'1',
				extraIcon: {
					color: '#4cd964',
					size: '26',
					type: 'image'
				},
				
				title: 'Hello',
				tabIndex: 0,
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				recList: [
					{name:'早餐', foodList:[
						{name:'狼牙土豆', remark: '狼牙土豆', cover: '/static/image/test/2.jpg'},
						{name:'狼牙土豆', remark: '狼牙土豆', cover: '/static/image/test/3.jpg'}]},
					{name:'午餐', foodList:[
						{name:'水晶蛋糕', remark: '狼牙土豆', cover: '/static/image/test/3.jpg'},
						{name:'蛋挞', remark: '狼牙土豆', cover: '/static/image/test/4.jpg'}]},
					{name:'晚餐', foodList:[
						{name:'水晶蛋糕', remark: '狼牙土豆', cover: '/static/image/test/5.jpg'},
						{name:'蛋挞', remark: '狼牙土豆', cover: '/static/image/test/6.jpg'}]}
				],
				persons: {count:3, standard_count: 2.3, energy: 5710.00, propList:[
					{name: '劳动强度', unit:'人', list:[{name: '轻体力', count: 2}, {name: '中等体力', count: 0}, {name: '重体力', count: 1}]},
					{name: '生理状况', unit:'人', list:[{name: '正常', count: 1}, {name: '孕妇', count: 1}, {name: '乳母', count: 1}]},
					{name: '年龄段', unit:'人', list:[{name: '婴儿', count: 1}, {name: '青少年', count: 0}, {name: '成年人', count: 1}, {name: '老年人', count: 1}]},
				]},
				nutritions: [{name: '能量', unit:'kcal', min: 400, rec: 600, max: 1200, value: 480, percent:80},
					{name: '蛋白质', unit:'g', min: 3, rec: 6, max: 12, value: 6, percent:100}, 
					{name: '碳水化合物', unit:'g', min: 3, rec: 6, max: 12, value: 1.2, percent:20},
					{name: '脂肪', unit:'g', min: 3, rec: 6, max: 8, value: 9, percent:150}],
				foodList: [
					{name:'狼牙土豆', cover: '/static/image/test/2.jpg'},
					{name:'水晶蛋糕', cover: '/static/image/test/3.jpg'},
					{name:'蛋挞', cover: '/static/image/test/5.jpg'},
					{name:'狼牙土豆', cover: '/static/image/test/2.jpg'},
					{name:'水晶蛋糕', cover: '/static/image/test/3.jpg'},
					{name:'蛋挞', cover: '/static/image/test/5.jpg'}
				],
			}
		},
		onLoad(options) {
			gui.init(this);
		},
		mounted(){
		},
		methods: {
			
			add() {
				if (this.content.length > 35) {
					this.content = '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。'
				} else {
					this.content = '折叠内容主体，这是一段比较长内容。通过点击按钮修改后内容后，使组件高度发生变化，在次点击按钮恢复之前的内容和高度。'
				}
				// TODO 小程序中不支持自动更新 ，需要手动resize 更新组件高度
				// #ifdef MP
				this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
				// #endif
			},
			onClick(e) {
				uni.showToast({
					title: '列表被点击'
				})
			},
			change(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.food-box{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		font-size: 14px;
	}
	.food-tabbar{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 80%;
		height: 50px;
	}
	.food-oper{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 20%;
		height: 50px;
	}
	.tab-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #666;
		padding: 0px 10px;
	}
	
	.item-name.active{
		color: #33b4ff;
		font-weight: bold;
		font-size: 16px;
	}
	
	.item-line{
		background-color: #33b4ff;
		width: 40%;
		height: 2px;
		margin-top: 4px;
	}
	
	.swiper{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 260px;
	}
	
	.swiper-item{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.group-container{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.func{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
	}
	
	.func-change{
		color: #33b4ff;
		font-size: 12px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 4px 10px;
		border: 1px solid #33b4ff;
		border-radius: 16px;
	}
	
	.statistic{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: calc( 100% - 10px );
		padding-left: 10px;
	}
	
	.section{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding: 0px 0px;
	}
	
	.section-head{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 40px;
		line-height: 40px;
	}
	
	.section-title{
		font-size: 14px;
		font-weight: bold;
		color: #666;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 80%;
	}
	
	.section-func{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 20%;
		font-size: 12px;
		color: #999;
	}
	
	.section-content{
		color: #333;
		font-size: 12px;
		line-height: 32px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
	}
	
	.section-table{
		border: 1px solid #f1f1f1;
		border-radius: 5px;
	}
	
	.data-block{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 28%;
		padding: 5px;
	}
	
	.data-rows{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
	}
	
	.data-row{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.data-title{
		line-height: 32px;
		font-weight: bold;
		font-size: 14px;
	}
	
	.data-label{
		font-size: 12px;
	}
	
	.data-value{
		font-size: 12px;
	}
	
	.section-remark{
		font-size: 12px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		padding: 6px 0px;
	}
	
	.nutrition-data{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
	}
	
	.nutrition-head{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		font-size: 14px;
		font-weight: bold;
	}
	
	.nutrition-left{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 80%;
	}
	
	.nutrition-right{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 20%;
	}
	
	.nutrition-block{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.nutrition-name{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.nutrition-remark{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	
	.nutrition-contains{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	
	.nutrition-label{
		font-size: 12px;
		color: #999;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	
	.nutrition-value{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 12px;
		color: #666;
	}
</style>
